<template>
<div class="chat">
  <div class="chatList" v-if="chatlist" v-for="(item,index) in chatlist">
    <div  class="pin-header-row">
      <div class="account-group">
        <div class="user-popover-box">
          <span class="navbar_avatar el-dropdown-link">
            <img v-if="item.customer_avatar" class="avatar" :src="$imgUrl + item.customer_avatar">
            <span v-else class="avatar">{{item.customer_name | formatString}}</span>
          </span>
        </div>
        <div class="user-info">
           <span>{{item.customer_name}}</span>
           <p>{{item.create_time}}</p>
        </div>
      </div>
      <div class="follow">
         <el-button v-if="item.status == 2" type="success" @click="followUser(index,1)" plain>关注</el-button>
         <el-button v-else type="success" @click="followUser(index,2)">已关注</el-button>
      </div>
    </div>
    <div class="pin-content" v-html="item.content">
      
    </div>
    <div class="pin-active">
      <el-badge class="item">
        <el-button size="small" @click="submitLike(index)">{{item.like_status == 1 ? '取消点赞':'点赞'}}{{item.likes}}</el-button>
      </el-badge>
      <el-badge :value="item.reply.length" class="item">
        <el-button size="small" @click="showinput(index)">回复</el-button>
      </el-badge>
      <div v-if="input === index">
        <el-input @change="changeValue(index)" v-model="item.value"  type="textarea" :rows="2" placeholder="请输入回复内容" style="margin-top:10px">      
        </el-input>
        <div style="text-align: right;margin-top:10px">
        <!--   <span style="color:rgba(0,0,0,.4)">{{value_num}}/240</span> -->
          <el-button @click="submitMessage(index)"  type="primary" slot="append">回复</el-button>
        </div>
        <div class="reply_content" v-if="item.reply" v-for="(list,key) in item.reply">
          <div class="social-avatar">
            <div class="media-body">
              <a href="#">
                {{list.replycustomer || '游客'}} 
                <span style="color:#000" v-show="list.to_user_id != 0 && item.message_id != list.reply_id">回复</span> 
                <span v-show="item.message_id != list.reply_id">{{list.messagecustomer || '游客'}}</span>
              </a>
              <small class="text-muted">{{list.create_time}}</small>
            </div>
          </div>
          <div class="social-body">
            <p>
              {{list.content}}
            </p>
          </div>
          <div class="reply_icon">
            <div v-if="list.like_status == 1 ">
              <img @click="submitReplyLike(index,key)" src="../../assets/images/like-s.png">
              <font>{{list.likes}}</font>
            </div>
            <div v-else>
              <img @click="submitReplyLike(index,key)" src="../../assets/images/likes.png">
              <font>{{list.likes}}</font>
            </div>
            <span @click="showreplyinput(key)">回复</span>
          </div>
          <div class="replyinput" v-if="replyinput == key">
              <el-input @change="changeValue" v-model="value"  type="textarea" :rows="2" placeholder="请输入回复内容" style="margin-top:10px">      
              </el-input>
              <el-button style="margin-left:10px;margin-top:10px" @click="submitReplyMessage(index,key)" type="primary" slot="append">回复</el-button>
          </div>
        </div>
        <div class="pagination" style="text-align: center;width:100%">
            <el-pagination
              small
              :page-size="5"
              layout="prev, pager, next"
              :total="item.reply.length">
            </el-pagination>
        </div>
      </div>
    </div>
  </div>
  <div class="pagination" v-show="chatlist.length > 10">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="editor-container">
    <div class="editor_title">
       <i class="el-icon-edit"></i>
       <span>发表评论</span>
    </div>
    <div class="editor">
      <div class="goLogin" v-if="!isLogin">
        <span @click="goLogin">请先登录/注册</span>
      </div>
      <wangeditor :catchData="catchData" v-else :isLogin="isLogin" style="background: #fff"  :content="content"></wangeditor>
    </div>
    <el-button v-show="isLogin" @click="submitMessage(-1)" style="margin-top:20px" type="primary">发送</el-button>
  </div>
  <el-dialog
        title=""
        :visible.sync="loginRegisterDialogVisible"
        width=" fullWidth > 450?'50%':'100%'"
        center>
        <loginRegister ></loginRegister>
  </el-dialog>
</div>
</template>

<script>
  import loginRegister from '@/components/login-register'
  import wangeditor from '@/components/wangeditor'
  export default {
    data () {
      return {
        value:'',
        value_num:0,
        input:-1,
        disabled:false,
        replyinput:-1,
        loginRegisterDialogVisible:false,
        content:"",
        isLogin:false,
        fullWidth:'',
        chatlist:[
          
        ]
      }
    },
    mounted () {
      let that = this;
      window.onresize = () => {
          return (() => {
              window.fullWidth = document.documentElement.clientWidth
              that.fullWidth = window.fullWidth
          })()
      }
      this.getDatas();
      sessionStorage.getItem('session')?this.isLogin=true:this.isLogin=false
    },
    watch:{
      fullWidth (val) {
          this.fullWidth = val
      }
    },
    methods: {
      changeValue(index){
         this.value_num = this.chatlist[index].value.length
         if(this.value_num > 0 ){
           this.disabled = true
         }
      },
      showinput(index){
        this.input = index
      },
      showreplyinput(index){
        this.replyinput = index
      },
      submitLike(index){
        let status = ''
        let text = ''
        if(this.chatlist[index].like_status == 1){
            status = 2  
            text = '取消点赞'  
          }else{
            status = 1  
            text = '点赞成功'
          }    
        let params = {
          message_id: this.chatlist[index].message_id,
          status:status,
        };
        this.$api.submitLike(params)
         .then(res => {
            this.getDatas()          
            this.$message({
                message: text,
                type: 'success'
            }) 
         })
      },
      submitReplyLike(index,key){
        let status = ''
        let text = ''
        if(this.chatlist[index].reply[key].like_status == 1){
            status = 2  
            text = '取消点赞' 
          }else{
            status = 1  
            text = '点赞成功'
          }    
        let params = {
          message_id: this.chatlist[index].reply[key].message_id,
          status:status,
        };
        this.$api.submitLike(params)
         .then(res => {
            this.getDatas()          
            
         })
      },
      catchData(value){
        this.content =  value
      },
      goLogin(){
        this.loginRegisterDialogVisible = true
      },
      followUser(index,status){
        let params = {
          follow_id : this.chatlist[index].user_id,
          status : status
        };
        this.$api.followUser(params)
         .then(res => {
          if(status == 1){
            this.$message({
                message: '关注成功',
                type: 'success'
            });      
          }else{
            this.$message({
                message: '取消关注成功',
                type: 'success'
            });  
          }    
          this.getDatas()
        })
      },
      getDatas() {
        let params = {

        };
        this.$api.getMessage(params)
         .then(res => {
           console.log(res)
            this.chatlist = res.data
            // for (var i =0 ; i < this.chatlist.length ;  i++) {
            //   this.chatlist[i].reply.map(item=>{
            //     item.sort()
            //      return item 
            //   })
            // }
         })
      },
      submitReplyMessage(index,key){
        let params = {
          content:this.value , 
          reply_id: this.chatlist[index].reply[key].message_id,
          message_id: this.chatlist[index].reply[key].message_id,
          to_user_id: this.chatlist[index].reply[key].user_id
        };
        this.$api.submitMessage(params)
         .then(res => {
            this.content = ""
            this.$message({
                message:'回复成功',
                type: 'success'
            });
            this.getDatas()
        })
      },
      submitMessage(index){  
        let reply_id  = ''
        let message_id = ''
        let to_user_id = ''
        let text = '留言'
        if(index>=0){
           reply_id = this.chatlist[index].message_id
           to_user_id = this.chatlist[index].user_id
           text = '回复'
        }    
        let params = {
          content:index >= 0 ? this.value : this.content, 
          reply_id: reply_id,
          message_id: message_id,
          to_user_id: to_user_id
        };
        this.$api.submitMessage(params)
         .then(res => {
            this.content = ""
            this.$message({
                message: text + '成功',
                type: 'success'
            });
            this.getDatas()
        })
      }
    },
    components: {
       wangeditor,
       loginRegister
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>
